  // 默认加载列表
  let id //设置id为全局变量
  const tbody = document.querySelector('tbody')
  const renderList = async() => {
      try {
          const res = await axios({
              url: '/student/list'
          })
          console.log(res.data.data);
          const data = res.data.data
          tbody.innerHTML = data.map(item =>
              `<tr>
         <th scope="row">${item.id}</th>
         <td>${item.name}</td>
         <td>${item.age}</td>
         <td>${item.sex}</td>
         <td>${item.group}</td>
         <td>${item.phone}</td>
         <td>${item.salary}</td>
         <td>${item.truesalary}</td>
         <td>${item.province+item.city+item.county}</td>
         <td >
         <button type="button" class="btn btn-primary btn-sm" data-id="${item.id}">修改</button>
         <button type="button" class="btn btn-danger btn-sm" data-id="${item.id}">删除</button>
         </td>
   </tr> `).join('')
      } catch (error) {
          console.dir(error)
      }

  }
  renderList()

  // 省市区三级联动
  const ps = document.querySelector('[name=province]')
  const cs = document.querySelector('[name=city]')
  const as = document.querySelector('[name=county]')
  initCity = async() => {

      // 获取所有的省份并渲染
      const pRes = await axios({
          url: "/geo/province"
      })
      console.log(pRes.data);
      ps.innerHTML = "<option selected=''  value=''>--省--</option>" + pRes.data.map(item => `<option  value='${item}'>--${item}--</option>`).join('')

      // 获取所有的城市并渲染
      ps.addEventListener('change', async() => {
          cs.value = ''
          as.value = ''
          try {
              const cRes = await axios({
                  url: "/geo/city",
                  params: {
                      pname: ps.value
                  }
              })
              cs.innerHTML = "<option selected=''  value=''>--市--</option>" + cRes.data.map(item => `<option  value='${item}'>--${item}--</option>`).join('')
          } catch (error) {
              console.dir(error);
          }
      })

      // 获取所有的地区并渲染
      cs.addEventListener('change', async() => {
          as.value = ''
          try {
              const aRes = await axios({
                  url: "/geo/county",
                  params: {
                      pname: ps.value,
                      cname: cs.value
                  }
              })
              as.innerHTML = "<option selected=''  value=''>--区/县--</option>" + aRes.data.map(item => `<option  value='${item}'>--${item}--</option>`).join('')
          } catch (error) {
              console.dir(error);
          }
      })
  }
  initCity()

  // 添加功能实现
  const form = document.querySelector('.add-form')
  document.querySelector('.btnAddStu').addEventListener('click', async() => {
      form.reset()
      $('#addModal').modal('show')
  })

  // 点击按钮提交数据
  const submit = document.querySelector('.btnAddStudent')
  submit.addEventListener('click', async(e) => {
      e.preventDefault()
      const data = serialize(form, {
          hash: true,
          empty: true
      })

      //判断性别   
      const sexs = document.querySelectorAll("[name='sex']")
      data.sex = sexs[0].checked ? '男' : '女'
      console.log(data);
      form.reset()
      $('#addModal').modal('hide')

      // 根据id是否存在判断是修改还是添加
      if (id) {
          data.id = id
          try {
              await axios({
                  url: "/student/update",
                  method: 'put',
                  data
              })
              renderList()
          } catch (error) {
              console.dir(error);
          }
      } else {
          try {
              const res = await axios({
                  url: "/student/add",
                  method: "POST",
                  data
              })
              renderList()
          } catch (error) {
              console.dir(error);
          }
      }
  })

  //删除和修改功能
  tbody.addEventListener('click', async e => {
      id = +e.target.dataset.id
      if (e.target.classList.contains('btn-danger')) {
          try {
              const res = await axios({
                  url: '/student/delete',
                  method: "DELETE",
                  params: {
                      id
                  }
              })
              renderList()
          } catch (error) {
              console.log(error.response.data.message);
          }
      }
      if (e.target.classList.contains('btn-primary')) {
          try {
              const res = await axios({
                  url: '/student/one',
                  params: {
                      id
                  }
              })
              const data = res.data.data

              // 获取所有的省列表
              const pRes = await axios({
                  url: "/geo/province"
              })
              console.log(pRes.data);
              ps.innerHTML = "<option selected=''  value=''>--省--</option>" + pRes.data.map(item => `<option  value='${item}'>--${item}--</option>`).join('')

              // 获取所有的城市列表
              try {
                  const cRes = await axios({
                      url: "/geo/city",
                      params: {
                          pname: data.province
                      }
                  })
                  cs.innerHTML = "<option selected=''  value=''>--市--</option>" + cRes.data.map(item => `<option  value='${item}'>--${item}--</option>`).join('')
              } catch (error) {
                  console.dir(error);
              }

              // 获取所有的地区/县列表
              try {
                  const aRes = await axios({
                      url: "/geo/county",
                      params: {
                          pname: data.province,
                          cname: data.city
                      }
                  })
                  as.innerHTML = "<option selected=''  value=''>--区/县--</option>" + aRes.data.map(item => `<option  value='${item}'>--${item}--</option>`).join('')
              } catch (error) {
                  console.dir(error);
              }

              // 遍历数据的键，数据回显
              Object.keys(data).forEach(async(k) => {
                  if (k === 'sex') {
                      const sexs = document.querySelectorAll("[name='sex']")
                      data[k] === '男' ? sexs[0].checked = true : sexs[1].checked = true
                  }
                  let item = document.querySelector(`[name='${k}']`)
                  if (item) item.value = data[k]
              })
              document.querySelector(".modal-title").innerHTML = '修改学员信息'
              submit.innerHTML = '确认编辑'
              $('#addModal').modal('show')
          } catch (error) {
              console.dir(error);
          }
      }
  })